<template>
    <div class="probar" :style="{width}">
        <span :style="{width:ratio,background:bgd}" :title="title">{{ title }}</span>
        <div class="pbtips">{{ tips }}</div>
    </div>
</template>

<script setup>
import {ref} from "vue"

const props = defineProps({
    title:'',
    width:'',
    ratio:'',
    tips:'',
    bgd:''
})
</script>

<style lang="scss" scoped>
.probar{
    position: relative;
    z-index: 10;
    width: 100%;
    height: 24px;
    background: #DDDDDD;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px; 
    &.probar2{
        .pbtips{
            color: #FF811E;
            font-size: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #FF9C00;
        }
        span{
            font-size: 16px; 
        }
    }
    span{
        display: block;
        box-sizing: border-box;
        height: 100%;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px; 
        background: linear-gradient(180deg, #FF9E25 0%, #FF811E 100%);
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 24px;
        text-align: right;
        padding: 0 15px 0 0;
        white-space: nowrap; 
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    .pbtips{
        position: absolute;
        align-items: center;
        z-index: 10;
        display: flex;
        height: 24px;
        top: 0;
        left:100% ;
        padding: 0 0 0 9px;
        white-space: nowrap;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #000000;
    }
}
</style>